<template>
	<view class="home">
		<div class="lunbo">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				style="width: 100%;height:100%;">
				<swiper-item v-for="(item,index) in movieList" :key="index">
					<view class="swiper-item">
						<img :src="item.img" alt="" style="background-size: cover;"/>
					</view>
				</swiper-item>
			</swiper>
		</div>
		<view class="list">
			<uni-section class="mb-10" title="热映电影" type="line"></uni-section>
			<view v-for="(item,index) in movieList" :key="index" class="movie-item" @tap="details(item.id)">
				<div class="pic">
					<img :src="item.img" mode="" />
				</div>
				<view class="content">
					<view class="name">{{item.nm}}</view>
					<view class="cat">{{item.cat}}</view>
					<view class="dir">{{item.dir}}</view>
					<view class="msg">{{item.desc}}</view>
					<view class="act">{{item.dexc}}</view>
					<view class="showtime">{{item.comingTitle}}</view>
					<view class="info2">
						<view class="sc">{{item.mk}} </view>
						<view class="wish">999+人想看</view>
					</view>
				</view>


				<!-- <uni-fav class="favBtn" @click="favClick(0)" /> -->

			</view>



		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		CONFIG

	} from '../../utils/config';

	import movieJson from "../../utils/movieJson"

	onLoad(() => {

		console.log(movieList.value)
	})

	let movieList = ref(movieJson)

	function details(id) {
		console.log(id)
		uni.navigateTo({
			url: '/pages/movieDeatils/movieDeatils?movieId=' + id
		})
	}
</script>

<style lang="scss">
	.lunbo {
		width: 100%;
		height: 380rpx;
		img{
			width: 100%;
			height: 380rpx;
			background-size: cover;
		}
	}

	.movie-item {
		display: flex;
		border: 1px solid #ccc;
		margin-bottom: 10px;
		padding: 5px;
		margin: 5px;
		border-radius: 8px;

		.fav {
			right: 0;
		}
	}

	.pic {
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;

		img {
			width: 110px;
			border-radius: 6px;
			height: 90%;
			padding: 0;
			margin: 0;
		}
	}

	.movie-poster {
		width: 100px;
		/* Adjust as needed */
		height: auto;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 60px;
	}

	.name {
		font-size: 18px;
		font-weight: bold;
	}

	.info {
		margin-top: 5px;
	}

	.info view {
		font-size: 14px;
		color: #666;
	}

	.favBtn {
		margin-top: 110px;
	}
</style>